<template>
    <div class="coupling-diagram flex-row flex-item" v-if="communicateList && communicateList.length">
        <div class="node-container left-container flex-column flex1">
            <div class="node-item flex-row flex-item" v-for="item in communicateList" :key="item.id">
                <div class="text-list flex-row">
                    <div class="flex1"></div>
                    <div class="text-item" v-for="(ip, index) in item.srcAddressContent" :key="index">{{ ip }}</div>
                </div>
                <el-popover
                        placement="top-start"
                        title="防火墙策略"
                        trigger="hover">
                    <div class="policy-item">行号: {{item.no || '-'}}</div>
                    <div class="policy-item">名称: {{item.name || '-'}}</div>
                    <div class="policy-item" v-if="item.protocolType">协议类型: {{item.protocolType || '-'}}</div>
                    <div class="policy-item">策略集: {{item.groupName || '-'}}</div>
                    <div class="policy-item">策略ID: {{item.rule || '-'}}</div>
                    <div class="policy-item" v-if="item.direction">应用方向: {{item.direction || '-'}}</div>
                    <div class="policy-item">结果: {{['禁用', '启用'][item.enable] || '-'}}</div>
                    <img slot="reference" class="icon" :src="getDeviceIcons(item.isPass === '禁止' ? 'Network3' : 'Network2')" alt="">
                </el-popover>
                <div class="flex1 line flex-row flex-item" :class="{'error-line': item.isPass === '禁止'}">
<!--                    <i v-if="item.direction === '入方向'" class="arrow-icon el-icon-position arrow-in"></i>-->
                    <div class="flex1 flex-row flex-center">
<!--                        <i v-if="item.direction === '入方向' && item.isPass === '禁止'" class="el-icon-close error-icon"></i>-->
                    </div>
<!--                    <i v-if="item.direction === '出方向'" class="arrow-icon el-icon-position arrow-out"></i>-->
                    <i class="arrow-icon el-icon-position arrow-out"></i>
                </div>
            </div>
        </div>
        <div class="firewall flex-column flex-item">
            <div class="grid flex-row flex1" v-for="i in communicateList.length * 6" :key="i" :class="{pdl: i % 2}">
                <div class="grid-cell" v-for="j in 3" :key="j"></div>
            </div>
        </div>
        <div class="node-container right-container flex-column flex1">
            <div class="node-item flex-row flex-item" v-for="item in communicateList" :key="item.id">
                <div class="flex1 line flex-row flex-item" :class="{'error-line': item.isPass === '禁止'}">
<!--                    <i v-if="item.direction === '入方向'" class="arrow-icon el-icon-position arrow-in"></i>-->
                    <div class="flex1 flex-row flex-center">
<!--                        <i v-if="item.direction === '出方向' && item.isPass === '禁止'" class="el-icon-close error-icon"></i>-->
                        <i v-if="item.isPass === '禁止'" class="el-icon-close error-icon"></i>
                    </div>
<!--                    <i v-if="item.direction === '出方向'" class="arrow-icon el-icon-position arrow-out"></i>-->
                    <i class="arrow-icon el-icon-position arrow-out"></i>
                </div>
                <el-popover
                        placement="top-start"
                        disabled
                        title="防火墙策略"
                        trigger="hover">
                    <div class="policy-item">行号: {{item.lineNum || '-'}}</div>
                    <div class="policy-item">名称: {{item.policyName || '-'}}</div>
                    <div class="policy-item" v-if="item.protocolType">协议类型: {{item.protocolType || '-'}}</div>
                    <div class="policy-item">策略集: {{item.ruleListName || '-'}}</div>
                    <div class="policy-item">策略ID: {{item.policyId || '-'}}</div>
                    <div class="policy-item" v-if="item.direction">应用方向: {{item.direction || '-'}}</div>
                    <div class="policy-item">结果: {{item.isPass || '-'}}</div>
                    <img slot="reference" class="icon" :src="getDeviceIcons(item.isPass === '禁止' ? 'Network3' : 'Network')" alt="">
                </el-popover>
                <div class="text-list">
                    <div class="text-item" v-if="item.gatewayName">名称：{{item.gatewayName}}</div>
                    <div class="text-item">IP:
                        <span class="text-item" v-for="(ip, index) in item.destAddressObjects" :key="index">{{ ip }}</span>
                    </div>
                    <div class="text-item" v-if="item.targetPort">端口：{{item.targetPort}}</div>
                </div>
            </div>
        </div>
    </div>
    <div v-else class="no-data-container flex-column flex-center">
        <img src="./img/no-data.png" alt="">
        <p class="tip">暂无数据</p>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'couplingDiagram',
  props: {
    filterData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      communicateList: [],
    }
  },
  methods: {
    refresh() {
      this.getCommunicate()
    },
    getCommunicate() {
      const { fireId, network } = this.filterData
      this.$http.get('/fire/policy/getFirePolicy', {
        params: {
          fireId,
          network,
          pageSize: 999,
          pageNum: 1
        }
      }).then(res => {
        this.communicateList = (res.records || []).filter(item => item?.id).map(item => {
          let srcAddressContent = item.srcAddressContent
          let destAddressObjects = item.destAddressObjects
          try {
            srcAddressContent = JSON.parse(srcAddressContent)
          } catch(e) {
            srcAddressContent = [srcAddressContent]
          }
          try {
            destAddressObjects = JSON.parse(destAddressObjects)
          } catch(e) {
            destAddressObjects = [destAddressObjects]
          }
          return {
            ...item,
            srcAddressContent,
            destAddressObjects
          }
        })
      }).catch(err => {
        this.$TZmessage.error(err.error || '获取数据失败')
      })
    }
  },
  computed: {
    ...mapState('dict', ['deviceTypeMap', 'getDeviceIcons']),
  }
}
</script>

<style lang="scss" scoped>
    .coupling-diagram {
        padding: 20px;
        width: calc(100vw - 400px);
        .node-container {
            min-width: 400px;
            .node-item {
                margin: 10px 0;
                .text-list {
                    min-width: 240px;
                }
                .icon {
                    width: 63px;
                    height: 63px;
                    margin: 2px 5px;
                }
                .text-item {
                    line-height: 20px;
                    font-size: 14px;
                    padding: 0 10px;
                }
                .line {
                    height: 2px;
                    background: #28bd38;
                    margin: 5px;
                    position: relative;
                    overflow: visible;
                    color: #28bd38;
                    text-align: center;
                    .arrow-icon {
                        font-weight: bolder;
                        font-size: 18px;
                        position: relative;
                    }
                    .arrow-out {
                        transform: rotate(45deg);
                    }
                    .arrow-in {
                        transform: rotate(225deg);
                    }
                }
                .error-line {
                    background: #f17979;
                    color: #f17979;
                    .error-icon {
                        font-weight: bolder;
                        font-size: 24px;
                        background: #ffffff;
                    }
                }
            }
        }
        /*.right-container {*/
        /*    .line {*/
        /*        border-bottom-color: #6485FB !important;*/
        /*    }*/
        /*}*/
        .firewall {
            width: 60px;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            margin: 6px;
            border: 2px solid #db4723;
            box-sizing: border-box;
            flex-shrink: 0;
            .grid {
                border-bottom: 2px solid #db4723;
                width: 100%;
                background: #f8f5f4;
                .grid-cell {
                    border-right: 2px solid #db4723;
                    box-sizing: border-box;
                    width: 30px;
                    height: 12px;
                    flex-shrink: 0;
                }
            }
            .pdl {
                padding-left: -15px;
                .grid-cell {
                    position: relative;
                    left: -15px;
                }
            }
            .grid:last-child {
                border-bottom: none;
            }
        }
    }
</style>